import React, { Component, PureComponent } from 'react'


export default class Demo extends PureComponent {
  state = {username: 'tom'}
  changeName = () => {
    this.setState({
      username: 'json'
    })
    // this.setState({})
  }

  // shouldComponentUpdate(nextProps, nextState){
  //    console.log('接下来要变化的props, state', nextProps, nextState)
  //    console.log('目前的props, state', this.props, this.state)
  //    if (this.state.username === nextState.username){
  //     return false
  //    }
  //    return true
  // }

  render() {
    const {username} = this.state
    console.log('Parent---render')
    return (
      <div>
         <h2>Demo...</h2>
         <h4>我的用户名是{username}</h4>
         <button onClick={this.changeName}>点我换名字</button>
         <B username='ot'/>
      </div>
    )
  }
}

class B extends PureComponent {

//   shouldComponentUpdate(nextProps, nextState){
//     console.log('接下来要变化的props, state', nextProps, nextState)
//     console.log('目前的props, state', this.props, this.state)
//     if (this.props.username === nextProps.username){
//      return false
//     }
//     return true
//  }

  render() {
    console.log('Child---render')
    return (
      <div>
        B...
        <h4>我从A组件接收到的用户名是{this.props.username}</h4>
      </div>
    )
  }
}


